<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>SixInOne医院管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <script src="/jquery/jquery-3.6.0.js"></script>
    <script src="/util/request.js" charset="utf-8"></script>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js" charset="utf-8"></script>


    <style>
        .layui-field-box {
            padding: 20px;
        }

        .layui-form-item {
            margin-bottom: 20px;
        }

        .layui-form-label {
            width: 100px;
        }

        .layui-input-block {
            margin-left: 110px;
        }

        .layui-input {
            width: calc(100% - 110px);
        }

        .layui-select {
            width: calc(100% - 110px);
        }


        .layui-field-box {
            width: 100%; /* 或设置为具体的宽度，比如 500px */
            max-width: 600px; /* 可选，设置最大宽度 */
        }

        .layui-table-cell {
            height: 60px;
            line-height: 60px;
        }

        th .layui-table-cell {
            height: 30px;
            line-height: 30px;
        }

        th .laytable-cell-1-0-7 {
            height: 30px;
            line-height: 30px;
        }

        .layui-table img {
            width: 100px;
            height: 60px;
        }


        .info-container {
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .info-container .layui-card-header {
            background-color: #009688;
            color: white;
            border-bottom: 2px solid #00695C;
            text-align: center;
        }

        .info-container h2 {
            color: #333;
            margin-bottom: 10px;
        }

        .info-container p {
            color: #666;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #e6e6e6;
            border-radius: 4px;
            background-color: #f8f8f8;
        }

        .info-container img {
            border-radius: 50%;
            margin-bottom: 10px;
            max-width: 100px;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .info-container .layui-card {
            border: 1px solid #e6e6e6;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;
        }

        #imagePreview {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #previewImg {
            max-width: 90%;
            max-height: 90%;
            border-radius: 5px;
        }


        /* 移动端 */
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer {
                left: 0;
            }

            .layui-layout-admin .layui-side {
                left: -300px;
            }
        }
    </style>
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">SixInOne医院管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="exceptionLog.html">系统异常日志</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="apiLog.html">第三方服务日志</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="banIP.html">封禁IP列表</a></li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="" id="img_top"
                         tppabs="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    <span id="username_top"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" id="myInfo">个人信息</a></dd>
                    <!--                    <dd><a href="javascript:;" id="edit">设置</a></dd>-->
                    <dd><a href="javascript:;" id="logout">退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="layui-icon layui-icon-console"></i> <span
                            class="nav-text">系统管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/page/index.html"><i class="layui-icon layui-icon-chart"></i> <span
                                class="nav-text">数据可视化展示</span></a></dd>
                        <dd><a href="/page/user.html"><i class="layui-icon layui-icon-user"></i> <span class="nav-text">管理员列表</span></a>
                        </dd>
                        <dd><a href="/page/exceptionLog.html"><i class="layui-icon layui-icon-log"></i> <span
                                class="nav-text">系统日志管理</span></a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="layui-icon layui-icon-group"></i> <span
                            class="nav-text">病人和病房管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/page/patient.html"><i class="layui-icon layui-icon-user"></i> <span
                                class="nav-text">病人列表</span></a></dd>
                        <dd><a href="/page/room.html"><i class="layui-icon layui-icon-home"></i> <span class="nav-text">病房列表</span></a>
                        </dd>
                        <dd><a href="/page/bed.html"><i class="layui-icon layui-icon-component"></i> <span
                                class="nav-text">病床列表</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="layui-icon layui-icon-user"></i> <span
                            class="nav-text">员工和部门管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/page/employee.html"><i class="layui-icon layui-icon-username"></i> <span
                                class="nav-text">员工列表</span></a></dd>
                        <dd><a href="/page/department.html"><i class="layui-icon layui-icon-tree"></i> <span
                                class="nav-text">部门列表</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="layui-icon layui-icon-form"></i> <span
                            class="nav-text">药品和仪器管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/page/drug.html"><i class="layui-icon layui-icon-template"></i> <span
                                class="nav-text">药品列表</span></a></dd>
                        <dd><a href="/page/instrument.html"><i class="layui-icon layui-icon-survey"></i> <span
                                class="nav-text">仪器列表</span></a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <!-- 内容主体区域  面包屑-->
            <span class="layui-breadcrumb">
              <a href="index.html">首页</a>
              <a href="user.html"><cite>用户管理</cite></a>
            </span>

            <!-- 水平线 -->
            <hr class="layui-bg-blue">

            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane" style="width: 1000px">
                        <label class="layui-form-label">员工姓名</label>
                        <div class="layui-input-inline" style="width: 300px">
                            <input type="text" id="search_username" placeholder="请输入员工姓名" class="layui-input">
                        </div>

                        <label class="layui-form-label">部门名称</label>
                        <div class="layui-input-inline" style="width: 300px">
                            <select id="department_select" class="layui-input">
                                <option value="">请选择部门</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                        </div>
                    </div>


                </div>

            </fieldset>


            <table class="layui-hide" id="userTable" lay-filter="userTable" lay-size="lg"></table>
            <div id="page"></div>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-warm  " lay-event="exportAllData"><i
                            class="layui-icon layui-icon-export" style="font-size: 28px"></i>Excel导出所有数据
                    </button>
                    <button class="layui-btn " lay-event="insert_form"><i class="layui-icon layui-icon-addition"
                                                                          style="font-size: 28px"></i>新增
                    </button>
                </div>
            </script>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script type="text/html" id="insert_form">
                <div class="layui-field-box">


                    <!-- 图片 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工照片</label>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="insert_imageUpload">上传员工照片</button>
                            <div class="layui-upload-list" style="margin-left: 110px">
                                <img class="layui-upload-img" style="width:100px;height:100px;border-radius: 50%"
                                     id="insert_img">
                                <p id="insert_demoText"></p>
                            </div>
                            <div style="width: 100px;margin-left: 110px">
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 员工姓名 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工姓名</label>
                        <div class="layui-input-block">
                            <input type="text" id="insert_employeeName" name="employeeName" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 员工职务 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工职务</label>
                        <div class="layui-input-block">
                            <input type="text" id="insert_employeePosition" name="employeePosition"
                                   lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 员工性别 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工性别</label>
                        <div class="layui-input-block">
                            <select id="insert_employeeGender" name="employeeGender" class="layui-input"
                                    lay-verify="required">
                                <option value="">请选择性别</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>

                    <!-- 员工年龄 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工年龄</label>
                        <div class="layui-input-block">
                            <input type="text" id="insert_employeeAge" name="employeeAge" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 员工电话 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工电话</label>
                        <div class="layui-input-block">
                            <input type="text" id="insert_employeeTel" name="employeeTel" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 员工薪水 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工薪水</label>
                        <div class="layui-input-block">
                            <input type="text" id="insert_employeeSalary" name="employeeSalary" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 入职时间 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">入职时间</label>
                        <div class="layui-input-block">
                            <input type="text" id="insert_employeeWorkDate" name="employeeWorkDate"
                                   lay-verify="required"
                                   autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>

                    <!-- 所属部门 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">所属部门</label>
                        <div class="layui-input-block">
                            <select id="insert_departmentName" class="layui-input">
                                <option value="">请选择部门</option>
                            </select>

                        </div>
                    </div>


                </div>
            </script>


            <script type="text/html" id="update_form">
                <div class="layui-field-box">
                    <!-- ID -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">ID</label>
                        <div class="layui-input-block">
                            <input type="text" id="id" name="id" lay-verify="required" autocomplete="off"
                                   class="layui-input" readonly>
                        </div>
                    </div>

                    <!-- 图片 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工照片</label>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="imageUpload">上传员工照片</button>
                            <div class="layui-upload-list" style="margin-left: 110px">
                                <img class="layui-upload-img" style="width:100px;height:100px;border-radius: 50%"
                                     id="img">
                                <p id="demoText"></p>
                            </div>
                            <div style="width: 100px;margin-left: 110px">
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 员工姓名 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工姓名</label>
                        <div class="layui-input-block">
                            <input type="text" id="employeeName" name="employeeName" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 员工职务 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工职务</label>
                        <div class="layui-input-block">
                            <input type="text" id="employeePosition" name="employeePosition" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 员工性别 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工性别</label>
                        <div class="layui-input-block">
                            <select id="employeeGender" name="employeeGender" class="layui-input" lay-verify="required">
                                <option value="">请选择性别</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>

                    <!-- 员工年龄 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工年龄</label>
                        <div class="layui-input-block">
                            <input type="text" id="employeeAge" name="employeeAge" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 员工电话 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工电话</label>
                        <div class="layui-input-block">
                            <input type="text" id="employeeTel" name="employeeTel" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 员工薪水 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">员工薪水</label>
                        <div class="layui-input-block">
                            <input type="text" id="employeeSalary" name="employeeSalary" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 入职时间 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">入职时间</label>
                        <div class="layui-input-block">
                            <input type="text" id="employeeWorkDate" name="employeeWorkDate" lay-verify="required"
                                   autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>

                    <!-- 所属部门 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">所属部门</label>
                        <div class="layui-input-block">
                            <select id="departmentName" class="layui-input">
                                <option value="">请选择部门</option>
                            </select>

                        </div>
                    </div>

                    <!-- 创建时间 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">创建时间</label>
                        <div class="layui-input-block">
                            <input type="text" id="createTime" name="createTime" lay-verify="required"
                                   autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>

                    <!-- 更新时间 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">更新时间</label>
                        <div class="layui-input-block">
                            <input type="text" id="updateTime" name="updateTime" lay-verify="required"
                                   autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>

                    <!-- 创建人 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">创建人</label>
                        <div class="layui-input-block">
                            <input type="text" id="createUser" name="createUser" lay-verify="required"
                                   autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>

                    <!-- 修改人 -->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">修改人</label>
                        <div class="layui-input-block">
                            <input type="text" id="updateUser" name="updateUser" lay-verify="required"
                                   autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>
                </div>
            </script>


        </div>
    </div>


    <div class="layui-footer" style="height: 30px">
        ©CopyRight 2024年7月20-7月25 sixinone团队
    </div>

    <script type="text/html" id="face_register_form">
        <div class="getface" style="position: absolute">
            <video id="video" width="600px" height="600px" autoplay="autoplay"></video>
            <canvas id="canvas" width="600px" height="600px" style="display: none;"></canvas>
        </div>
    </script>
</div>


<script>
    var select = {};
    let currentPage = 1;
    let pageSize = 10;
    var admin = localStorage.getItem("admin")
    admin = JSON.parse(admin)


    if (!admin) {
        window.location.href = '/page/login.html';
    }

    layui.use(['upload', 'element', 'layer'], function () {

        layer = layui.layer;


        // 页面加载完成后执行
        $(document).ready(function () {
            checkFaceRegistration();
        });

        function checkFaceRegistration() {

            if (admin.faceRegister === 0 || admin.faceRegister === null || admin.faceRegister === undefined) {
                // 如果没有注册人脸，弹出注册模态框
                showFaceRegisterModal();
            }
        }

        function showFaceRegisterModal() {
            layer.open({
                type: 1,
                title: '人脸注册',
                closeBtn: false,
                area: ['600px', '600px'],
                shade: 0.8,
                id: 'LAY_layuipro_face', //设定一个id，防止重复弹出
                btn: ['注册', '取消'],
                btnAlign: 'c',
                moveType: 1, //拖拽模式，0或者1
                content: $('#face_register_form').html(), // 引入自定义表单
                btn1: function (index, layero) {
                    // 注册按钮点击事件
                    var imgSrc = captureFaceImage();
                    if (!imgSrc) {
                        layer.msg('请拍摄人脸照片');
                        return false;
                    }

                    let data = {"imageBase64": imgSrc};

                    postData("/user/registerFace", data, true).then(res => {
                        if (res.code === 200) {
                            layer.msg("人脸注册成功!");
                            layer.close(index);
                            window.location.href = '/page/login.html';
                        }
                    });
                },
                success: function (layero) {
                    startVideo();
                }
            });
        }

        function startVideo() {
            var video = document.getElementById('video');
            navigator.mediaDevices.getUserMedia({video: true})
                .then(function (stream) {
                    video.srcObject = stream;
                    video.play();
                })
                .catch(function (err) {
                    console.log("An error occurred: " + err);
                });
        }

        function captureFaceImage() {
            var canvas = document.getElementById('canvas');
            var video = document.getElementById('video');
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            return canvas.toDataURL('image/png');
        }

    });


    // alert(admin.AiFace)
    // if(admin.AiFace===null||admin.AiFace===undefined){
    //     $("#face_register_form").show();
    // }
    $("#username_top").text(admin.username)
    $("#img_top").attr("src", admin.avatar);


    $("#iReset").click(function () {
        $("#search_username").val("");   // 清空
        $("#department_select").val("");   // 清空
    });

    $("#searchVal").click(function () {
        let employeeName = $("#search_username").val();   // 获取值
        let departmentName = $("#department_select").val();       // 获取值
        let json = {};
        if (employeeName != null && employeeName !== '') {
            json.employeeName = employeeName;             //
        }
        //
        if (departmentName != null && departmentName !== '') {
            json.departmentName = departmentName;             //  {'role':'管理'}
        }
        tableFlush(json);
    });

    $("#logout").click(function () {
        postData('/user/logout', {}, true).then(resp => {
            if (resp.code === 200) {
                localStorage.removeItem("admin");
                sessionStorage.removeItem("token");

                window.location.replace('/page/login.html');

            }
        })
    })


    $("#edit").click(function () {
        alert("录入人脸")
    })


    $("#myInfo").click(function () {
        var admin = localStorage.getItem("admin");
        admin = JSON.parse(admin);
        if (admin) {
            var avatar = admin.avatar;
            var username = admin.username;
            var userRole = admin.userRole;
            var email = admin.email;

        }
        var htmlContent = `
                <div class="info-container layui-card">
                    <div class="layui-card-header"><h2>我的信息</h2></div>
                    <div class="layui-card-body">
                        <img src="${avatar}" class="layui-img-circle" />
                        <p><strong>姓名：</strong>${username}</p>
                        <p><strong>邮箱：</strong>${email}</p>
                        <p><strong>账户权限：</strong>${userRole}</p>
                    </div>
                </div>
            `;


        // 使用layer.open展示HTML内容
        layer.open({
            type: 1,
            title: false, // 不显示默认的标题
            content: htmlContent,
            area: ['400px', '400px'], // 控制弹出层的大小
            shade: 0.8, // 半透明遮罩
            shadeClose: true, // 点击遮罩关闭
            offset: 'auto', // 弹出层居中
            anim: 2, // 弹出动画
            closeBtn: 1 // 关闭按钮样式
        });
    })


    function tableFlush(searchParams) {

        layui.use(['upload', 'element', 'form', 'layer', 'table', 'laypage', 'laydate'], function () {
                var $ = layui.jquery
                    , upload = layui.upload
                    , element = layui.element
                    , layer = layui.layer
                    , table = layui.table
                    , laypage = layui.laypage
                    , form = layui.form;


                var token = sessionStorage.getItem('token');
                var baseUrl = 'http://localhost:8888/api/admin';

                getData('/employee/listDepartmentName', {}, true).then(resp => {
                    if (resp.code === 200) {
                        var departments = resp.data;

                        select = resp.data
                        var $select = $('#department_select');


                        // 清空下拉框
                        $select.empty();
                        $select.append('<option value="">请选择部门</option>');

                        // 遍历数据并添加到下拉框中
                        departments.forEach(function (department) {
                            $select.append('<option value="' + department.departmentName + '">' + department.departmentName + '</option>');
                        });


                        // 刷新表单，让layui重新渲染
                        form.render('select');
                    }
                })


                if (!searchParams) {
                    searchParams = {};
                }
                searchParams.page = currentPage;
                searchParams.limit = pageSize;
                getData('/employee/selectEmployeeByLimit', searchParams, true).then(res => {
                    table.render({
                        elem: '#userTable',
                        toolbar: '#toolbarDemo', // 开启头部工具栏，并为其绑定左侧模板
                        defaultToolbar: ['filter', 'exports', 'print', { // 自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                            title: '提示',
                            layEvent: 'LAYTABLE_TIPS',
                            icon: 'layui-icon-tips'
                        }],
                        title: '员工数据表',
                        limit: pageSize,
                        cols: [[
                            {type: 'checkbox', fixed: 'left'},
                            {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true},
                            {
                                field: 'img',
                                title: '员工图片',
                                width: 120,
                                height: 'full-80',
                                unresize: true,
                                templet: function (d) {
                                    return `<img class="avatar" src="${d.img}" style="width: 50px; height: 50px; object-fit: contain; border-radius: 50%;">`;
                                }
                            },
                            {field: 'employeeName', title: '员工姓名', width: 120, unresize: true},
                            {field: 'employeePosition', title: '员工职务', width: 150, unresize: true},
                            {field: 'employeeGender', title: '员工性别', width: 100, unresize: true},
                            {field: 'employeeAge', title: '员工年龄', width: 100, unresize: true},
                            {field: 'employeeTel', title: '员工电话', width: 150, unresize: true},
                            {field: 'employeeSalary', title: '员工薪水', width: 150, unresize: true},
                            {field: 'employeeWorkDate', title: '入职时间', width: 150, unresize: true},
                            {field: 'departmentName', title: '所属部门', width: 150, unresize: true},

                            {field: 'createTime', title: '创建时间', width: 120, unresize: true},
                            {field: 'updateTime', title: '更新时间', width: 120, unresize: true},
                            {field: 'createUser', title: '创建人', width: 120, unresize: true},
                            {field: 'updateUser', title: '修改人', width: 120, unresize: true},
                            {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                        ]],
                        data: res.data,
                    });

                    // 添加模态框元素到页面
                    if ($('#imagePreview').length === 0) { // 确保模态框元素只添加一次
                        $('body').append(`
            <div id="imagePreview" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center; overflow: hidden;">
                <img id="previewImg" src="" style="max-width: 90%; max-height: 90%; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.5);">
            </div>
        `);
                    }

                    // 头像点击事件处理
                    $(document).on('click', '.avatar', function () {
                        var imgSrc = $(this).attr('src');
                        $('#previewImg').attr('src', imgSrc);
                        $('#imagePreview').fadeIn();
                    });

                    // 模态框点击事件处理
                    $(document).on('click', '#imagePreview', function () {
                        $(this).hide();
                    });

                    // 渲染分页
                    laypage.render({
                        elem: 'page',
                        count: res.count,
                        limit: pageSize,
                        curr: currentPage,
                        // theme: '#c81623',
                        limits: [5, 10, 20, 30, 100],
                        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
                        jump: function (obj, first) {
                            if (!first) {
                                currentPage = obj.curr;
                                pageSize = obj.limit;
                                tableFlush(searchParams);
                            }
                        }
                    });
                });


                //常规使用 - 普通图片上传


                table.on('toolbar(userTable)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    let dataPojo = {}

                    switch (obj.event) {
                        case 'exportAllData':

                            exportAllData();
                            break;

                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：' + data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选' : '未全选');
                            break;
                        case 'insert_form':
                            layer.open({     // 弹出框处理  模态框
                                type: 1               // 模态框
                                , title: '新增' //不显示标题栏
                                , closeBtn: false
                                , area: ['500px', '500px']  // 宽和高
                                , shade: 0.5
                                , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                                , btn: ['新增', '取消']
                                , btnAlign: 'c'
                                , moveType: 1 //拖拽模式，0或者1
                                , content: $('#insert_form').html()         // 引入自定义表单
                                , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                                    var employeeName = $('#insert_employeeName').val();
                                    var employeePosition = $('#insert_employeePosition').val();
                                    var employeeGender = $('#insert_employeeGender').val();
                                    var employeeAge = $('#insert_employeeAge').val();
                                    var employeeTel = $('#insert_employeeTel').val();
                                    var employeeSalary = $('#insert_employeeSalary').val();
                                    var employeeWorkDate = $('#insert_employeeWorkDate').val();
                                    var departmentName = $('#insert_departmentName').val();


                                    if (employeeName === '' || employeePosition === '' || employeeGender === '' || employeeAge === '' || employeeTel === '' ||
                                        employeeSalary === '' || employeeWorkDate === '' || departmentName === '') {
                                        layer.msg('请填写完整信息');
                                        return false;
                                    }

                                    dataPojo.employeeName = employeeName;
                                    dataPojo.employeePosition = employeePosition;
                                    dataPojo.employeeGender = employeeGender;
                                    dataPojo.employeeAge = employeeAge;
                                    dataPojo.employeeTel = employeeTel;
                                    dataPojo.employeeSalary = employeeSalary;
                                    dataPojo.employeeWorkDate = employeeWorkDate;
                                    dataPojo.departmentName = departmentName;


                                    postData("/employee/addEmployee", dataPojo, true).then(res => {
                                        if (res.code === 200) {
                                            layer.msg("新增成功!");
                                            layer.close(index);                         // 关闭当前窗口
                                            tableFlush();
                                        }
                                    })
                                }
                                , success: function (layero) {
                                }

                            });

                            var $select_Insert = $('#insert_departmentName');
                            $select_Insert.empty()
                            $select_Insert.append('<option value="">请选择部门</option>');
                            select.forEach(function (department) {
                                $select_Insert.append('<option value="' + department.departmentName + '">' + department.departmentName + '</option>');
                            });

                            var laydate = layui.laydate;
                            laydate.render({
                                elem: '#insert_employeeWorkDate',
                                type: 'datetime'  // 设置为日期时间选择器
                            });
                            upload.render({
                                elem: '#insert_imageUpload'
                                , accept: 'images'
                                , url: '/api/admin/public/'
                                , before: function (obj) {
                                    obj.preview(function (index, file, result) {
                                        $('#insert_img').attr('src', result);
                                        dataPojo.img = result;
                                    });

                                    element.progress('demo', '0%'); //进度条复位
                                    layer.msg('上传中', {icon: 16, time: 2});
                                }
                                //进度条
                                , progress: function (n, elem, e) {
                                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                                    if (n === 100) {
                                        layer.msg('上传完毕', {icon: 1});
                                    }
                                }
                            });

                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    }
                    ;
                });

                function exportAllData() {
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', baseUrl + '/employee/uploadExcel', true);
                    xhr.responseType = 'blob'; // 重要：确保将响应类型设置为blob

                    xhr.setRequestHeader('Authorization', sessionStorage.getItem('token')); // 替换为你的实际请求头和值

                    xhr.onload = function () {
                        if (xhr.status === 200) {
                            var url = window.URL.createObjectURL(xhr.response);
                            var link = document.createElement('a');
                            link.href = url;

                            var contentDisposition = xhr.getResponseHeader('Content-Disposition');
                            var fileName = 'exported_data.xlsx';
                            if (contentDisposition) {
                                var fileNameMatch = contentDisposition.match(/filename\*=utf-8''(.+)/);
                                if (fileNameMatch.length === 2) {
                                    fileName = decodeURIComponent(fileNameMatch[1]);
                                }
                            }

                            link.setAttribute('download', fileName);
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        } else {
                            console.error('下载文件失败', xhr.statusText);
                        }
                    };

                    xhr.onerror = function () {
                        console.error('下载文件失败', xhr.statusText);
                    };

                    xhr.send();
                }


                //监听行工具事件
                table.on('tool(userTable)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {

                            const drug = {
                                id: data.id,
                                url: data.img
                            };
                            postData("/employee/deleteById", drug, true).then(res => {

                                if (res.code === 200) {
                                    layer.msg("删除成功!");
                                    layer.close(index);                         // 关闭当前窗口
                                    tableFlush();
                                }
                            })
                        });
                    } else if (obj.event === 'edit') {

                        layer.open({     // 弹出框处理  模态框
                            type: 1               // 模态框
                            , title: '编辑' //不显示标题栏
                            , closeBtn: false
                            , area: ['500px', '500px']  // 宽和高
                            , shade: 0.5
                            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            , btn: ['更新了', '取消']
                            , btnAlign: 'c'
                            , moveType: 1 //拖拽模式，0或者1
                            , content: $('#update_form').html()         // 引入自定义表单
                            , btn1: function (index, layero) {
                                let id = $("#id").val();
                                let img = $("#img").attr("src");
                                let employeeName = $("#employeeName").val();
                                let employeePosition = $("#employeePosition").val();
                                let employeeGender = $("#employeeGender").val();
                                let employeeAge = $("#employeeAge").val();
                                let employeeTel = $("#employeeTel").val();
                                let employeeSalary = $("#employeeSalary").val();
                                let employeeWorkDate = $("#employeeWorkDate").val();
                                let departmentName = $("#departmentName").val();


                                if (employeeName === '' || employeePosition === '' || employeeGender === '' || employeeAge === '' || employeeTel === '' ||
                                    employeeSalary === '' || employeeWorkDate === '' || departmentName === '') {
                                    layer.msg('请填写完整信息');
                                    return false;
                                }
                                let data = {
                                    id: id,
                                    img: img,
                                    employeeName: employeeName,
                                    employeePosition: employeePosition,
                                    employeeGender: employeeGender,
                                    employeeAge: employeeAge,
                                    employeeTel: employeeTel,
                                    employeeSalary: employeeSalary,
                                    employeeWorkDate: employeeWorkDate,
                                    departmentName: departmentName,

                                };

                                postData("/employee/updateById", data, true).then(res => {
                                    if (res.code === 200) {
                                        layer.msg("更新成功!");
                                        layer.close(index);
                                        tableFlush();
                                    }
                                })

                            }
                            , success: function (layero) {
                                // 动态加载部门选项
                                var departmentSelect = document.getElementById('departmentName');
                                select.forEach(function (department) {
                                    var option = document.createElement('option');
                                    option.value = department.departmentName;
                                    option.text = department.departmentName;
                                    departmentSelect.add(option);
                                });

                                // 刷新渲染select选项
                                form.render('select');
                                $("#id").val(data.id);

                                $("#employeeName").val(data.employeeName);
                                $("#employeePosition").val(data.employeePosition);
                                $("#employeeGender").val(data.employeeGender);
                                $("#employeeAge").val(data.employeeAge);
                                $("#employeeTel").val(data.employeeTel);
                                $("#employeeSalary").val(data.employeeSalary);
                                $("#employeeWorkDate").val(data.employeeWorkDate);
                                $("#departmentName").val(data.departmentName);
                                $("#img").attr("src", data.img);


                                $("#createTime").val(data.createTime);
                                $("#updateTime").val(data.updateTime);
                                $("#createUser").val(data.createUser);
                                $("#updateUser").val(data.updateUser);

                            }
                        });
                        var laydate = layui.laydate;
                        laydate.render({
                            elem: '#employeeWorkDate',
                            type: 'datetime'  // 设置为日期时间选择器
                        });

                    }
                    let id = $("#id").val();

                    var uploadInst = upload.render({
                        elem: '#imageUpload'
                        , url: baseUrl + '/file/employee/fileUpload'
                        , headers: {
                            'Authorization': token
                        }
                        , data: {
                            id: id
                        }
                        , accept: 'images'
                        , before: function (obj) {
                            //预读本地文件示例，不支持ie8
                            obj.preview(function (index, file, result) {
                                $('#img').attr('src', result); //图片链接（base64）
                            });

                            element.progress('demo', '0%'); //进度条复位
                            layer.msg('上传中', {icon: 16, time: 2});
                        }
                        , done: function (res) {
                            if (res.code === 200) {
                                layer.msg("上传成功!");
                                tableFlush();
                            }
                            //如果上传失败
                            if (res.code !== 200) {
                                return layer.msg('上传失败');
                            }
                            $('#demoText').html(''); //置空上传失败的状态
                        }
                        , error: function () {
                            var demoText = $('#demoText');
                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                            demoText.find('.demo-reload').on('click', function () {
                                uploadInst.upload();
                            });
                        }
                        //进度条
                        , progress: function (n, elem, e) {
                            element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                            if (n === 100) {
                                layer.msg('上传完毕', {icon: 1});
                            }
                        }
                    });


                });
            }
        )
        ;
    }

    tableFlush();
</script>

</body>
</html>
